<template>
  <view class="edit-project">
    <view class="form-box">
      <view class="form-item">
        <view class="item-label">网关编号</view>
        <view class="item-content"><input placeholder="请输入网关编号" type="number" v-model="gatewayNumber" /></view>
        <i class="operate-icon iconfont icon-scan" @click="scanQR" />
      </view>
      <view class="form-item">
        <view class="item-label">项目名称</view>
        <view class="item-content"><input placeholder="请输入项目名称" v-model="projectName" /></view>
      </view>
      <view class="form-item">
        <view class="item-label">项目地址</view>
        <view class="item-content"><input placeholder="请选择项目地址" v-model="projectAddress" /></view>
        <i class="operate-icon location iconfont icon-location" @click="chooseProjectAddr" />
      </view>
      <view class="form-item">
        <view class="item-label">灯具总数</view>
        <view class="item-content"><input placeholder="请输入灯具总数" type="number" v-model="lampCount" /></view>
      </view>
      <view class="form-item">
        <view class="item-label">电费单价</view>
        <view class="item-content"><input placeholder="请输入电费单价" type="digit" v-model="price" /></view>
      </view>
	  <view class="form-item">
	    <view class="item-label">最大功率</view>
	    <view class="item-content"><input placeholder="请输入最大功率" type="digit" v-model="power" /></view>
	  </view>
	  <view class="form-item">
	    <view class="item-label">原灯平均功率</view>
	    <view class="item-content"><input placeholder="请输入原灯平均功率" type="digit" v-model="power0" /></view>
	  </view>
      <view class="form-item">
        <view class="item-label">上报时间间隔</view>
        <view class="item-content">
          <uni-data-select class="select" :clear="false" v-model="reportInterval" :localdata="reportIntervalList" placeholder="请选择时间间隔"></uni-data-select>
        </view>
      </view>
    </view>
    <view class="submit-btn" @click="doSubmit">确定</view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { CONFIG } from '@/envs/_/config'
import { fixedDecimal } from '@/utils/index.js'
const chooseLocation = requirePlugin('chooseLocation')

export default {
  mixins: [mixin],
  data() {
    return {
      gatewayNumber: '',
      projectName: '',
      projectAddress: '',
      lampCount: 0,
      price: '',
	  power: '',
	  power0: '',
      reportInterval: null,
      reportIntervalList: [
        {
          value: 24,
          text: '1天'
        },
        {
          value: 48,
          text: '2天'
        },
        {
          value: 72,
          text: '3天'
        },
        {
          value: 120,
          text: '5天'
        },
      ]
    }
  },
  onShow() {
    const self = this
    const location = chooseLocation.getLocation()
    if (location) {
      self.projectAddress = location.address
    }
  },
  onUnload() {
    chooseLocation.setLocation(null)
  },
  mounted() {
    if (this.params.id) {
      this.getProjectInfo()
    }
  },
  methods: {
    getProjectInfo() {
      const self = this
      uni.request({
        url: '/project/get',
        data: {
          id: self.params.id
        },
        success(result) {
          if (result.data.success && result.data.data) {
            const projectInfo = result.data.data
            self.gatewayNumber = projectInfo.gateway_id
            self.projectName = projectInfo.name || ''
            self.projectAddress = projectInfo.address || ''
            self.lampCount = Math.ceil(projectInfo._node_count) || 0
            self.price = fixedDecimal(projectInfo.price, 4)
			self.power = projectInfo.power || ''
			self.power0 = projectInfo.power0 || ''
            self.reportInterval = self.reportIntervalList.find(item => item.value === projectInfo.warning_hours)?.value || 120
          }
        }
      })
    },

    scanQR() {
      const self = this
      uni.scanCode({
        scanType: ['qrCode'],
        success(res) {
          console.log(res)
          self.gatewayNumber = res.result
        },
        fail(e) {
          if (!e.errMsg?.includes('cancel')) {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        }
      })
    },
    chooseProjectAddr() {
      const key = CONFIG.MAP_KEY
      const referer = CONFIG.PROJECT_NAME
      wx.navigateTo({
        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
      })
    },
    checkCanSubmit() {
      const self = this
      self.gatewayNumber = `${self.gatewayNumber}`.trim()
      if (!self.gatewayNumber) {
        uni.showToast({
          icon: 'none',
          title: '请输入网关编号'
        })
        return false
      }
      self.projectName = self.projectName.trim()
      if (!self.projectName) {
        uni.showToast({
          icon: 'none',
          title: '请输入项目名称'
        })
        return false
      }
      self.projectAddress = self.projectAddress.trim()
      if (!self.projectAddress) {
        uni.showToast({
          icon: 'none',
          title: '请输入项目地址'
        })
        return false
      }
      self.lampCount = `${self.lampCount}`.trim()
      const lampCountReg = /^([1-9]\d*)|0$/
      if (!lampCountReg.test(self.lampCount)) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的灯具总数'
        })
        return false
      }
      self.price = parseFloat(self.price)
      if (!(self.price && self.price === fixedDecimal(self.price, 4))) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的电费单价，保留4位小数'
        })
        return false
      }
      return true
    },
    doSubmit() {
      const self = this
      if (self.checkCanSubmit()) {
        self.submit()
      }
    },
    submit() {
      const self = this
      uni.request({
        url: '/project/modify',
        method: 'POST',
        data: {
          id: self.params.id,
          gateway_id: self.gatewayNumber,
          name: self.projectName,
          address: self.projectAddress,
          _node_count: self.lampCount,
          price: self.price,
		  power: self.power,
		  power0: self.power0,
          warning_hours: self.reportInterval
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-project {
  min-height: 100vh;
  background-color: $white;
  padding: 10rpx 30rpx 120rpx;
  .form-box {
    .form-item {
      height: 100rpx;
      border-bottom: 2rpx solid $border-base;
      padding: 20rpx 50rpx 20rpx 150rpx;
      position: relative;
      display: flex;
      align-items: center;
      .item-label {
        position: absolute;
        left: 0;
        font-size: $font-size-3;
        font-weight: bold;
      }
      .item-content {
        text-align: right;
        width: 100%;
        font-size: $font-size-2;
        display: flex;
        justify-content: flex-end;
        &.placeholder {
          color: $text-placeholder;
        }
        .select {
          /deep/ .uni-select {
            font-size: $font-size-2 !important;
          }
        }
      }
      .operate-icon {
        position: absolute;
        right: 0;
        font-size: $font-size-6;
        color: $primary;
        &.location {
          color: $success;
        }
        &:after {
          position: absolute;
          content: '';
          display: block;
          left: -10rpx;
          right: -10rpx;
          top: -10rpx;
          bottom: -10rpx;
        }
      }
    }
  }
  .submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $primary;
    color: $white;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-4;
  }
}
</style>
